<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示特效</title>
    <!-- 连接外部的样式表 -->
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
  <input type="checkbox" id="check">
  <label for="check">
    <i class="fa fa-bars" id="btn"></i>
    <i class="fa fa-arrow-left" id="cancel"></i>
  </label>

  <div class="sidebar">
    <header>My App</header>
    <ul>
      <li><a href="#"><i class="fa fa-address-card" aria-hidden="true"></i>Dashboard</a></li>
      <li><a href="#"><i class="fa fa-bandcamp" aria-hidden="true"></i>Test1</a></li>
      <li><a href="#"><i class="fa fa-telegram" aria-hidden="true"></i>Test2</a></li>
      <li><a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>Test3</a></li>
      <li><a href="#"><i class="fa fa-grav" aria-hidden="true"></i>Test4</a></li>
      <li><a href="#"><i class="fa fa-envelope-open" aria-hidden="true"></i>Test5</a></li>
      <li><a href="#"><i class="fa fa-snowflake-o" aria-hidden="true"></i>Test6</a></li>
    </ul>
  </div>
<!-- 背景图片 -->
<section>

</section>

</body>
</html>